<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>考勤系统后台</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />    
    
    <link href="${pageContext.request.contextPath }/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
    
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/dist/css/font-awesome.css" rel="stylesheet" />
    
    <link href="${pageContext.request.contextPath }/dist/css/adminia.css" rel="stylesheet" /> 
    <link href="${pageContext.request.contextPath }/dist/css/adminia-responsive.css" rel="stylesheet" /> 
    
    <link href="${pageContext.request.contextPath }/dist/css/pages/dashboard.css" rel="stylesheet" /> 
     <script src="${pageContext.request.contextPath }/dist/js/echarts.js"></script>
    
	
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
	
<div class="navbar navbar-fixed-top">
	
	<div class="navbar-inner">
		
		<div class="container">
			
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 				
			</a>
			
			<a class="brand" >考勤系统</a>
			
			<div class="nav-collapse">
			
				<ul class="nav pull-right">
					<li>
						<a href="#"><span class="badge badge-warning">7</span></a>
					</li>
					
					<li class="divider-vertical"></li>
					
					<li class="dropdown">
						
						<a data-toggle="dropdown" class="dropdown-toggle " href="#">
							${sessionScope.admin.adminName} <b class="caret"></b>							
						</a>
						
						<ul class="dropdown-menu">
							<li>
								<a href="#"><i class="icon-user"></i> 账户设置 </a>
							</li>
							
							<li><a href=""  data-toggle="modal" data-target="#change_admin_pwd"><i class="icon-lock"></i> 修改密码</a></li>
							
							<li class="divider"></li>
							
							<li>
								<a href="${pageContext.request.contextPath }/AdminController?op=adminQuit"><i class="icon-off"></i>退出</a>
							</li>
						</ul>
					</li>
				</ul>
				
			</div> 
			
		</div>
		
	</div> 
</div> 




<div id="content">
	
	<div class="container">
		
		<div class="row">
			
			<div class="span3">
				
				<div class="account-container">
				
					<div class="account-avatar">
						<c:if test="${sessionScope.admin.adminAvatarAddr != null }">
									<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=${sessionScope.admin.adminAvatarAddr}" alt="" class="thumbnail" id="adImg" ></a>
								</c:if>
								<c:if test="${sessionScope.admin.adminAvatarAddr == null }">
										<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=labi.jpg" alt="" class="thumbnail" id="adImg"  ></a>
								</c:if>
					</div> <!-- /account-avatar -->
					<div class="account-details">
					
						<span class="account-name">${sessionScope.admin.adminName}</span>
						<span class="account-role">${sessionScope.admin.adminId}号管理员</span>
						
						<span class="account-actions">
							<a href="javascript:;">个人资料</a> |
							
							<a href="javascript:;">账户管理</a>
						</span>
					
					</div> <!-- /account-details -->
				
				</div> <!-- /account-container -->
				
				<hr />
				
				<ul id="main-nav" class="nav nav-tabs nav-stacked">
					
					<li class="active">
						<a href="${pageContext.request.contextPath }/Admin/Index.jsp">
							<i class="icon-home"></i>
							统计信息
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/leaveApproval.jsp">
							<i class="icon-th-list"></i>
							请假审批
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/kaoqgl.jsp">
							<i class="icon-signal"></i>
							考勤管理	
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/yuanggl.jsp">
							<i class="icon-user"></i>
							员工管理							
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/regAdmin.jsp">
							<i class="icon-user"></i>
							账户管理
						</a>
					</li>

				</ul>	
				
				<hr />
				
				<div class="sidebar-extra">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
				</div> <!-- .sidebar-extra -->
				
				<br />
		
			</div> <!-- /span3 -->
			
			
			
			<div class="span9">
				
				<h1 class="page-title">
					<i class="icon-home"></i>
					本月考勤
				</h1>
				
				<div class="stat-container">
										
					<div class="stat-holder">						
						<div class="stat">							
							<span id="normalNum"></span>							
							全勤							
						</div> <!-- /stat -->						
					</div> <!-- /stat-holder -->
					
					<div class="stat-holder">						
						<div class="stat">							
							<span id="delayNum"></span>							
							迟到						
						</div> <!-- /stat -->						
					</div> <!-- /stat-holder -->
					
					<div class="stat-holder">						
						<div class="stat">							
							<span id="earlyDepNum"></span>							
							早退						
						</div> <!-- /stat -->						
					</div> <!-- /stat-holder -->
					
					<div class="stat-holder">						
						<div class="stat">							
							<span id="absentNum"></span>							
							旷工						
						</div> <!-- /stat -->						
					</div> <!-- /stat-holder -->

				</div> <!-- /stat-container -->
				
								<!-- 历史记录 -->
				<div class="widget">
										
					<div class="widget-header">
						<i class="icon-signal"></i>
						<h3>历史记录</h3>
					</div> <!-- /widget-header -->
														
					<div class="widget-content">				
					<!-- 引入EChars插件 -->		
						<div id="bar-chart" style="width: 800px;height:400px;"></div>
		 			
					</div> <!-- /widget-content -->

				</div> <!-- /widget -->
				
				<!-- 当日记录 -->
				<div class="widget widget-table">
										
					<div class="widget-header">
						<i class="icon-th-list"></i>
						<h3>当日记录</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
					
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>记录编号</th>
									<th>员工姓名</th>
									<th>上班时间</th>
									<th>下班时间</th>
									<th>考勤状态</th>
								</tr>
							</thead>
							
							<tbody id="recordsListBody">

							</tbody>
						</table>
										<!-- 分页信息 -->
					<div id="showPageInfo"></div>
					<!-- 分页实现    -->
				   		 <div class="col-md-12 text-center"><!-- 设置居中 -->
							<ul class="pagination" id="pageItem">
							
							</ul>
						</div>	
					</div> <!-- /widget-content -->
					
				</div> <!-- /widget -->
				
				

				
				

				<div class="row">
					
					<div class="span5">
									
						<div class="widget">
							
							<div class="widget-header">
								<h3>三大纪律</h3>
							</div> <!-- /widget-header -->
																
							<div class="widget-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div> <!-- /widget-content -->
							
						</div> <!-- /widget -->
						
					</div> <!-- /span5 -->
		
					<div class="span4">
						
						<div class="widget">
							
							<div class="widget-header">
								<h3>八项注意</h3>
							</div> <!-- /widget-header -->
																
							<div class="widget-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
							</div> <!-- /widget-content -->
							
						</div> <!-- /widget -->
					</div> <!-- /span4 -->
					
				</div> <!-- /row -->
				
			</div> <!-- /span9 -->
			
			
		</div> <!-- /row -->
		
	</div> <!-- /container -->
	
</div> <!-- /content -->
					
	
<div id="footer">
	
	<div class="container">				
		<hr />
		<p>&copy; 员工考勤系统后台</p>
	</div> <!-- /container -->
	
</div> <!-- /footer -->

<!-- 修改密码的模态框 -->
	<div class="modal fade" id="change_admin_pwd" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<form class="form-horizontal" role="form" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="previousPwd" class="col-sm-2 control-label">原密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="previousPwd"
									name="previousPwd"  />
							</div>
						</div>
						<div class="form-group">
							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newPwd"
									name="newPwd" />
							</div>
						</div>

						<div class="form-group">
							<label for="newRePwd" class="col-sm-2 control-label">确认输入</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newRePwd"
									name="newRePwd" />
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</form>
		</div>
		<!-- /.modal -->
	</div>
    
    <!-- 修改头像模态框 -->
    <div class="modal fade" id="updPic">
		<div class="modal-dialog">
			<div class="modal-content" >
		
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">修改头像</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
			 <form id="updatePicForm" enctype="multipart/form-data" method="post">
				<!-- 模态框主体 -->
				<div class="modal-body">
				<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" name="ep" />
				</div>
			</form>
			
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success" id="btup">确认修改</button>
				</div>
				
			
			</div>
		</div>
	</div>

<script src="${pageContext.request.contextPath }/dist/js/jquery-1.7.2.min.js"></script>

<script src="${pageContext.request.contextPath }/dist/js/excanvas.min.js"></script>
<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.js"></script>
<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.pie.js"></script>
<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.orderBars.js"></script>
<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.resize.js"></script>


<script src="${pageContext.request.contextPath }/dist/js/bootstrap.js"></script>
<%-- <script src="${pageContext.request.contextPath }/dist/js/charts/bar.js"></script> --%>

<script type="text/javascript">

$(function(){
	//赋值动作,各种监听事件
	//界面一进来就需要发送ajax请求文章列表
	$.get("${pageContext.request.contextPath}/RecordsController",{op:"recordsByPage_ajax"},function(result){
		//显示数据写成一个方法,以后就不用在做拼接
		showData(result);
	},"json")
	
	//首页
	$(document).on("click",".first",function(){
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/RecordsController",{op:"recordsByPage_ajax",pageNo:1,pageSize:5},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	//末页
	$(document).on("click",".last",function(){
		//获取末页值
		var totalPage=$("#totalPage").text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/RecordsController",{op:"recordsByPage_ajax",pageNo:totalPage,pageSize:5},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	//下一页
	$(document).on("click",".next",function(){
		//获取当前页
		var pageNo=$("#pageNo").text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/RecordsController",{op:"recordsByPage_ajax",pageNo:(parseInt(pageNo)+1),pageSize:5},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	//每一页
	$(document).on("click",".currentPage",function(){
		//获取当前选中的页码
		var pageNo=$(this).text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/RecordsController",{op:"recordsByPage_ajax",pageNo:pageNo,pageSize:5},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	//跳转
	$(document).on("click",".trunto",function(){
		//获取number框的值
		var pageNo=$("#turntoId").val();
		//获取末页值
		var totalPage=$("#totalPage").text();
		if(pageNo<1){
			pageNo=1;
			$("#turntoId").val(pageNo);
		}else if(pageNo > totalPage*1){  //*1 弱类型语言,字符串*1直接转数字
			pageNo=totalPage; 
			$("#turntoId").val(pageNo);
		}
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/RecordsController",{op:"recordsByPage_ajax",pageNo:pageNo,pageSize:5},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showData(result);
		},"json")
	});
	
	
	
	/* //修改按钮的监听事件
	$("#updateBtn").click(function(){
		//创建一个js对象存储文章修改后信息发送服务器
		var article={
				//属性要跟实体类一致
				articleId: $("#articleId").val(),
				articleTitle: $("#articleTitle").val(),
				articleContent: $("#articleContent").val(),
				articleAuthor: $("#articleAuthor").val()
		};
		
	}) */
	function showData(result){
		//1.每一次遍历之前需要清空
		$("#recordsListBody").empty();
		//2.清空分页的累计
		$("#showPageInfo").empty();
		$("#pageItem").empty();
		//2.显示文章列表数据
		$.each(result.data,function(index,record){
			var endTime = (record.endTime == undefined || record.endTime == null) ? "未打卡" : record.endTime.substring(0,record.endTime.length-2);
			//先把tr标签复制到后端的字符串中,自动转义,复制到text中替换${    与  }
			$("#recordsListBody").append("<tr>\r\n" + 
					"									<td>"+record.recordId +"</td>\r\n" + 
					"									<td>"+record.emp.empName +"</td>\r\n" + 
					"									<td>"+record.beginTime.substring(0,record.beginTime.length-2) +"</td>\r\n" + 
					"									<td>"+endTime+"</td>\r\n" + 
					"									<td>"+(record.clockInDetails == 0 ? "正常" : record.clockInDetails == 1 ? "迟到" : record.clockInDetails == 2 ? "早退" : "旷工") +"</td>\r\n" + 
					"								</tr>")
		});
		
		//显示分页信息
		$("#showPageInfo").append("当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+
				                  "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");
		
	   //首页
	   if(1==result.pageNo){
		   $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
	   }
	   //显示分页栏目
	   for(var i=1;i<=result.totalPage;i++){
		   if(i==result.pageNo){
			   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
		   } 
	   }
	   //下一页
	   if(result.pageNo==result.totalPage){
		   $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
	   }
	   //末页
	   if(result.pageNo==result.totalPage){
		   $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
	   }
	   //跳转页
	    $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId" value="'+result.pageNo+'" min="1" max="'+result.totalPage+
	    		'" style="width:40px;height:20px"/></a></li>');
	    $("#pageItem").append('<li><a href="#" class="trunto">跳转</a></li>');
	}
})
</script>
<!-- 本月考勤记录的js -->
<script type="text/javascript">
$(function(){
	$.get("${pageContext.request.contextPath}/RecordsController",{op:"requestIndexRecords"},function(result){

		//显示数据写成一个方法,以后就不用在做拼接
		$("#normalNum").html(result[0]);
		$("#delayNum").html(result[1]);
		$("#earlyDepNum").html(result[2]);
		$("#absentNum").html(result[3]);
	},"json")
})
</script>
<script type="text/javascript">
	$(function(){
		//点击事件触发模态框
		$("#updateBtn").click(function(){
			
			//var adminName=${sessionScope.admin.adminName};
			var	previousPwd=$("#previousPwd").val();
			var	newPwd=$("#newPwd").val();
			var	newRePwd=$("#newRePwd").val();
			
			
			
		if(newPwd==newRePwd){
			//发送Ajax请求修改密码
			$.get("${pageContext.request.contextPath }/AdminController",{op:"change_admin_pwd",previousPwd:previousPwd,newPwd:newPwd,adminName:"${sessionScope.admin.adminName}"},function(flag){
				if(flag){
					//关闭模态框后并刷新数据
					$("#change_admin_pwd").modal('hide');
					//
				}else{
					alert("账户密码错误,修改失败!")
				}
			},"json")
		}else{
			
			alert("两次密码不一致");
		}
		
		})
	})
</script>
<!-- 图表插件的生成动作 -->
<script type="text/javascript">

$(function(){
	$.get("${pageContext.request.contextPath}/RecordsController",{op:"requestIndexRecords"},function(result){

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('bar-chart'));

		// 指定图表的配置项和数据
		option = {
			color: ['#8BAAB5', '#8F7BAD', '#4cabce', '#AFBA99'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['Forest', 'Steppe', 'Desert', 'Wetland']
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: {
						show: true
					},
					dataView: {
						show: true,
						readOnly: false
					},
					magicType: {
						show: true,
						type: ['line', 'bar', 'stack', 'tiled']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			xAxis: [{
				type: 'category',
				axisTick: {
					show: false
				},
				data: [(new Date().getMonth()+1)+'月',( new Date().getMonth())+'月', (new Date().getMonth()-1)+'月',( new Date().getMonth()-2)+'月', (new Date().getMonth()-3)+'月']
			}],
			yAxis: [{
				type: 'value'
			}],
			series: [{
					name: '全勤',
					type: 'bar',
					barGap: 0,

					data: [result[0], 18, 20, 13, 25]
				},
				{
					name: '迟到',
					type: 'bar',
				
					data: [result[1], 15, 20, 8, 14]
				},
				{
					name: '早退',
					type: 'bar',
					
					data: [result[2], 15, 17, 13, 16]
				},
				{
					name: '旷工',
					type: 'bar',
					
					data: [result[3], 15, 20, 13, 10]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	},"json")
	
	$("#btup").click(function(){
					var formData = new FormData($("#updatePicForm")[0]);
					$.ajax({
						async : true,
						url : "${pageContext.request.contextPath}/AdminController?op=updatePic",
						type : "POST",
						data : formData,
						contentType : false,
						processData : false,
						success : function(admin) {
							var path = admin.adminAvatarAddr;
							$("#updPic").modal('hide');
							$("#adImg").attr("src","${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName="+path+"&a=" + new Date().getTime());
						},
						error : function() {
							alert("异步请求失败");
						}
					})
				})
})





</script>
  </body>
</html>